<template>
	<view class="pages_intelligence" v-if="studyDetails" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#fff'"></myTabs>


		<view class="study_heardBox" v-if="studyDetails.studyStatus==1">
			<view class="study_heardTop">
				<view class="study_heardTopImgBox" @click="ff_previewImage(studyDetails.coverImg)">
					<image mode="aspectFill" :src="studyDetails.coverImg"></image>
				</view>
				<view class="study_heardTopBottomBox">
					<p>{{studyDetails.title}}</p>
					<view class="study_heardTopBottomBoxPric">
						<span>￥</span>
						<span>{{studyDetails.price}}</span>
					</view>
				</view>
			</view>
			<view class="study_heardBottom">
				<view class="study_heardBottomTop" v-if="studyDetails.lockStatus!=11&&studyDetails.lockStatus!=12" id="study_heardBottomTop">
					<!-- "lockStatus": 0//解锁状态【0=未解锁 10=待开启 11=解锁失败 20=已解锁】 -->
					<view v-if="isLeft" :style="{left: `${lefts}rpx`}" class="study_percentage">
						<span v-if="studyDetails.lockStatus==0&&studyDetails.conditionNum>studyDetails.joinNum">
							正在火热解锁中
						</span>
						<span v-else-if="studyDetails.lockStatus==10&&studyDetails.conditionNum>studyDetails.joinNum">
							正在火热解锁中
						</span>
						<span v-else-if="studyDetails.lockStatus==11||studyDetails.lockStatus==12">
							目标解锁失败
						</span>
						<span v-else-if="studyDetails.lockStatus==20&&!studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
							解锁成功
						</span>
						<span v-else-if="studyDetails.lockStatus==20&&studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
							课程已上线
						</span>
						<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&!studyDetails.jumpPath">
							课程筹备中
						</span>
						<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&studyDetails.jumpPath">
							课程已上线
						</span>
					</view>
					<view v-if="isRigth && studyDetails.lockStatus!=20" :style="{left: `${rigths}rpx`}"
						class="study_percentageRigth">
						<span v-if="studyDetails.lockStatus==0&&studyDetails.conditionNum>studyDetails.joinNum">
							正在火热解锁中
						</span>
						<span v-else-if="studyDetails.lockStatus==10&&studyDetails.conditionNum>studyDetails.joinNum">
							正在火热解锁中
						</span>
						<span v-else-if="studyDetails.lockStatus==11||studyDetails.lockStatus==12">
							目标解锁失败
						</span>
						<span v-else-if="studyDetails.lockStatus==20&&!studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
							解锁成功
						</span>
						<span v-else-if="studyDetails.lockStatus==20&&studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
							课程已上线
						</span>
						<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&!studyDetails.jumpPath">
							课程筹备中
						</span>
						<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&studyDetails.jumpPath">
							课程已上线
						</span>
					</view>
					<u-line-progress ref="progress" :percentage="percentage" :showText="false" height="8"
						inactiveColor="#f0f0f0" activeColor="#ffda2d">
					</u-line-progress>
				</view>
				<view class="study_heardBottomMain" v-if="studyDetails.lockStatus!=11&&studyDetails.lockStatus!=12">
					<view class="study_heardBottomMainItems">
						<view class="study_heardBottomMainItemsTops">
							<view>
								<u-count-to :startVal="0" :endVal="studyDetails.conditionNum"></u-count-to>
								<span>人</span>
							</view>
						</view>
						<view class="study_heardBottomMainItemsBottom">
							需要人数
						</view>
					</view>
					<view class="study_heardBottomMainItems">
						<view class="study_heardBottomMainItemsTops">
							<view v-if="surplusTime==0" class="study_heardBottomMainItemsTopsTitke">
								已截至
							</view>
							<view v-else>
								<u-count-to :startVal="0" :endVal="surplusTime"></u-count-to>
								<span>天</span>
							</view>
						</view>
						<view class="study_heardBottomMainItemsBottom">
							剩余时间
						</view>
					</view>
					<view class="study_heardBottomMainItems">
						<view class="study_heardBottomMainItemsTops">
							<!-- <view>
								<u-count-to :startVal="0" :endVal="percentage"></u-count-to>
								<span>%</span>
							</view> -->
							<span v-if="studyDetails.lockStatus==0&&studyDetails.conditionNum>studyDetails.joinNum">
								课程解锁中
							</span>
							<span v-else-if="studyDetails.lockStatus==10&&studyDetails.conditionNum>studyDetails.joinNum">
								课程解锁中
							</span>
							<span v-else-if="studyDetails.lockStatus==20&&!studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
								课程筹备中
							</span>
							<span v-else-if="studyDetails.lockStatus==20&&studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
								课程已上线
							</span>
							<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&!studyDetails.jumpPath">
								课程筹备中
							</span>
							<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&studyDetails.jumpPath">
								课程已上线
							</span>
							<span v-else-if="studyDetails.lockStatus==11||studyDetails.lockStatus==12">
								解锁失败
							</span>
						</view>
						<view class="study_heardBottomMainItemsBottom">
							当前状态
						</view>
					</view>
				</view>
			</view>
			<view @click="goPath"
				:class="(studyDetails.lockStatus==0||studyDetails.lockStatus==20) ? 'study_heardBottomUnlock' : 'study_heardBottomUnlock_act'">
				<span v-if="studyDetails.lockStatus==0&&studyDetails.conditionNum>studyDetails.joinNum">
					我要解锁
				</span>
				<span v-else-if="studyDetails.lockStatus==10&&studyDetails.conditionNum>studyDetails.joinNum">
					已支付，待解锁
				</span>
				<span v-else-if="studyDetails.lockStatus==20&&!studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
					请耐心等待开课
				</span>
				<span v-else-if="studyDetails.lockStatus==20&&studyDetails.jumpPath&&studyDetails.conditionNum<=studyDetails.joinNum">
					立即学习
				</span>
				<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&!studyDetails.jumpPath">
					支付，等待开课
				</span>
				<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<=studyDetails.joinNum&&studyDetails.jumpPath">
					支付后，立即学习
				</span>
				<span v-else-if="studyDetails.lockStatus==11||studyDetails.lockStatus==12">
					目标解锁失败
				</span>
				<image v-if="studyDetails.lockStatus==20" src="/static/img/rightIcons.png"></image>
			</view>
		</view>
		<view class="study_heardBox" v-else-if="studyDetails.studyStatus==2">
			<view class="study_heardTop">
				<view class="study_heardTopImgBox" @click="ff_previewImage(studyDetails.coverImg)">
					<image mode="aspectFill" :src="studyDetails.coverImg"></image>
				</view>
				<view class="study_heardTopBottomBox">
					<p>{{studyDetails.title}}</p>
					<view class="study_heardTopBottomBoxPric">
						<span>￥</span>
						<span>{{studyDetails.price}}</span>
					</view>
				</view>
			</view>
			<view @click="goPath"
				:class="'study_heardBottomUnlock_act'">
				<span>该课程，已过期</span>
			</view>
		</view>
		<!-- 介绍详情 -->
		<view class="study_introduce">
			<view class="pages_intelligenceHeardLeft">必读须知</view>
			<p>1. 该菜品烹饪课程由四川烹饪杂志社提供，课程形式为视频或文字类课程；</p>
			<p>2. 课程采用众筹形式发起，当解锁人数满足条件后，课程将进入筹备期，请您耐心等待，您可在小程序【我】—【我的课程中查看进度】；</p>
			<p>3. 课程筹备完成后，您可在本页面点击按钮进入课程，课程可无限次观看；</p>
			<p>4. 如课程在时限内未满足解锁条件，系统将自动退还您支付的费用；</p>
			<p>5. 如有其他不可抗因素导致您无法学习，请在社群中联系工作人员处理。</p>
			<!-- <u-parse :content="studyDetails.content"></u-parse> -->
		</view>

	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				title: '我想学',
				percentage: 0,
				endDate: 10,
				endNum: 70,
				lefts: 0,
				rigths: 0,
				isLeft: false,
				isRigth: false,
				studyId: 0,
				studyDetails: null,
				surplusTime: 0,
				content: ``,
				buyType: 20
			}
		},
		onLoad(options) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			if (options.studyId) {
				this.studyId = options.studyId;
			}
			if (options.buyType) {
				this.buyType = options.buyType;
			}
			if(options.studyType){
				this.buyType = options.studyType==1 ? 20 : 40;
			}
			this.init();
		},
		onReady() {

		},
		onShow(options) {
			if (!options) return
			this.studyId = options;
			this.init();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		methods: {
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			init() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				if(this.buyType==20){
					this.$api.informationStudyGet({
						studyId: this.studyId
					}).then(res => {
						if (res.code == 200) {
							this.studyDetails = res.data;
							//<!-- "lockStatus": 0//解锁状态【0=未解锁 10=待开启 11=解锁失败 20=已解锁】 -->
							//<span v-if="studyDetails.lockStatus==0&&studyDetails.conditionNum<studyDetails.joinNum&&!studyDetails.jumpPath">
							//	正在火热解锁中
							//</span>
							//<span v-else-if="studyDetails.lockStatus==10&&studyDetails.conditionNum<studyDetails.joinNum&&!studyDetails.jumpPath">
							//	正在火热解锁中
							//</span>
							//<span v-else-if="studyDetails.lockStatus==11||studyDetails.lockStatus==12">
							//	目标解锁失败
							//</span>
							//<span v-else-if="studyDetails.lockStatus==20&&!studyDetails.jumpPath&&studyDetails.conditionNum>=studyDetails.joinNum">
							//	解锁成功
							//</span>
							//<span v-else-if="studyDetails.lockStatus==20&&studyDetails.jumpPath&&studyDetails.conditionNum>=studyDetails.joinNum">
							//	课程已上线
							//</span>
							//<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum>=studyDetails.joinNum&&!studyDetails.jumpPath">
							//	课程筹备中
							//</span>
							//<span v-else-if="studyDetails.lockStatus==0&&studyDetails.conditionNum>=studyDetails.joinNum&&studyDetails.jumpPath">
							//	课程已上线
							//</span>
							// this.studyDetails.studyStatus=1;
							// this.studyDetails.conditionNum=1;
							// this.studyDetails.lockStatus=0;
							// this.studyDetails.joinNum=0;
							// this.studyDetails.jumpPath='12'
							
							this.title = res.data.title
					
							//解锁状态 : 0=未解锁 10=待开启
							if (this.studyDetails.lockStatus == 0 || this.studyDetails.lockStatus == 10) {
								// 剩余时间
								let diffTime = this.studyDetails.countdown;
								if(diffTime>0&&diffTime<=86400000){
									this.surplusTime = 1
								}else{
									this.surplusTime = diffTime / 86400000;
								}
								
							}
							uni.hideLoading();
					
							setTimeout(() => {
								if(this.studyDetails.studyStatus==2 || this.studyDetails.lockStatus == 11 || this.studyDetails.lockStatus==12){
									return
								}
								// 数据可视化处理
								this.percentage = (this.studyDetails.joinNum / this.studyDetails
									.conditionNum) * 100;
								this.percentage = this.percentage>=100?100:this.percentage;
								const query = uni.createSelectorQuery().in(this);
								query.select("#study_heardBottomTop").boundingClientRect(data => {
									this.lefts = (data.width / 100 * this.percentage * 2) - 177;
									this.rigths = (data.width / 100 * this.percentage * 2) - 30;
					
									if (this.lefts < 162) {
										this.isRigth = true;
										this.isLeft = false;
									} else {
										this.isRigth = false;
										this.isLeft = true;
									}
									
								}).exec();
							}, 600)
					
						}
					})
				}else if(this.buyType==40){
					this.$api.foodsStudyGet({
						studyId: this.studyId
					}).then(res => {
						if (res.code == 200) {
							this.studyDetails = res.data;
							this.title = res.data.title
							//解锁状态 : 0=未解锁 10=待开启
							if (this.studyDetails.lockStatus == 0 || this.studyDetails.lockStatus == 10) {
								// 剩余时间
								let diffTime = this.studyDetails.countdown;
								if(diffTime>0&&diffTime<=86400000){
									this.surplusTime = 1
								}else{
									this.surplusTime = diffTime / 86400000;
								}
							}
					uni.hideLoading();
							setTimeout(() => {
								if(this.studyDetails.studyStatus==2 || this.studyDetails.lockStatus == 11 || this.studyDetails.lockStatus==12){
									return
								}
								// 数据可视化处理
								this.percentage = (this.studyDetails.joinNum / this.studyDetails
									.conditionNum) * 100;
									this.percentage = this.percentage>=100?100:this.percentage;
								const query = uni.createSelectorQuery().in(this);
								query.select("#study_heardBottomTop").boundingClientRect(data => {
									this.lefts = (data.width / 100 * this.percentage * 2) - 177;
									this.rigths = (data.width / 100 * this.percentage * 2) - 30;
					
									if (this.lefts < 162) {
										this.isRigth = true;
										this.isLeft = false;
									} else {
										this.isRigth = false;
										this.isLeft = true;
									}
					
					
								}).exec();
							}, 600)
					
						}
					})
				}
				
			},
			goBlack() {
				uni.navigateBack();
			},
			goPath() {
				if(this.studyDetails.studyStatus == 2){
					uni.showToast({
						icon:'none',
						title:'已过期',
						mask:true
					})
					return
				}
				
				
				if (this.studyDetails.lockStatus == 0) {
					uni.navigateTo({
						url: `/package/payment/index?informationTitle=${this.studyDetails.title}&studyId=${this.studyDetails.studyId}&buyType=${this.buyType}`
					})
				} else {
					// uni.navigateTo({
					// 	url: this.studyDetails.joinPath
					// })
					if (!this.studyDetails.jumpPath) {
						uni.showToast({
							title: '敬请期待',
							mask: true,
							icon: 'none'
						})
						return
					}
					// 
					let path = this.studyDetails.jumpPath ? this.studyDetails.jumpPath : 'page/home/content/content_alive/content_alive_desc/content_alive_desc?h5Url=https%3A%2F%2FappTCVlUyvG2205.h5.xiaoeknow.com%2Fcontent_page%2FeyJ0eXBlIjoyLCJhcHBfaWQiOiJhcHBUQ1ZsVXl2RzIyMDUiLCJyZXNvdXJjZV90eXBlIjo0LCJwcm9kdWN0X2lkIjoiIiwiY2hhbm5lbF9pZCI6IiIsInJlc291cmNlX2lkIjoibF82Mjc0ZWE0MWU0YjA5ZGRhMTI2NDdhNDUifQ&__id__=1&id=l_6274ea41e4b09dda12647a45'
					uni.navigateToMiniProgram({
						appId: 'wx79358ee2d3d2bb05',
						path,
						success(res) {
							// 打开成功
							console.log('跳转成功---->', res)
						}
					});
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #F0F0F0;
		min-height: 100vh;
		box-sizing: border-box;

		.study_heardBox {
			padding: 32rpx;
			box-sizing: border-box;
			border-radius: 0 0 24rpx 24rpx;
			background-color: #fff;
		}

		.study_heardTop {
			display: flex;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #eaeaea;
			margin-bottom: 24rpx;
		}

		.study_introduce {
			/deep/image {
				display: block;
				width: 100% !important;
			}
			p{
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
			
		}

		.study_heardTopImgBox {
			width: 192rpx;
			height: 144rpx;
			overflow: hidden;
			border-radius: 16rpx;
			margin-right: 24rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.study_heardTopBottomBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			p {
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 40rpx;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
			 display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				margin-bottom: 22rpx;
			}
		}

		.study_heardTopBottomBoxPric {
			display: flex;
			align-items: flex-end;

			span {
				display: inline-block;
				height: 22px;
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 22px;
				color: #FF471C;
			}

			span:nth-child(1) {
				font-size: 28rpx;
			}

			span:nth-child(2) {
			 transform: translate(-5rpx, -3rpx);
			}
		}

		.study_heardBottomMainItems {
			flex: 1;
			text-align: center;
			margin: 32rpx 0 56rpx 0;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
		}

		.study_heardBottomMainItemsTops {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			line-height: 58rpx;
			height: 58rpx;
			span{
				font-size: 30rpx;
				display: inline-block;
				line-height: 66rpx;
			}

			// span {
			// 	position: absolute;
			// 	display: inline-block;
			// 	height: 28rpx;
			// 	font-size: 20rpx;
			// 	font-family: PingFang SC;
			// 	font-weight: bold;
			// 	line-height: 28rpx;
			// 	color: #333333;
			// 	margin-left: 4rpx;
			// }
		}

		.study_heardBottomMainItemsTopsTitke {
			height: 58rpx;
			font-size: 38rpx;
			font-family: DIN;
			font-weight: bold;
			line-height: 58rpx;
			color: #333333;
			text-align: center;
		}

		.study_heardBottomMain {
			display: flex;
			justify-content: space-around;
		}

		.study_heardBottomMainItemsBottom {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;
			margin-top: 8rpx;
		}

		.study_heardBottomTop {
			height: 76rpx;
			position: relative;
			display: flex;
			align-items: flex-end;
		}

		.study_heardBottomUnlock {
			width: 558rpx;
			height: 88rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 88rpx;
			color: #000000;
			background: #FFDA2D;
			border-radius: 24rpx;
			margin: 0 auto;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}
		}

		.study_heardBottomUnlock_act {
			width: 558rpx;
			height: 88rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 88rpx;
			color: #7f7f7f;
			background: #e5e5e5;
			border-radius: 24rpx;
			margin: 0 auto;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}
		}

		.study_percentage {
			background-color: #FFDA2D;
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			height: 48rpx;
			font-size: 24rpx;
			width: 170rpx;
			text-align: center;
			border-radius: 12rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 48rpx;
			color: #333333;

			&::after {
				content: "";
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-top: 10rpx solid #FFDA2D;
				position: absolute;
				bottom: -20rpx;
				right: 20rpx;
			}
		}

		.study_percentageRigth {
			background-color: #FFDA2D;
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			height: 48rpx;
			font-size: 24rpx;
			width: 192rpx;
			text-align: center;
			border-radius: 12rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 48rpx;
			color: #333333;

			&::after {
				content: "";
				width: 0;
				height: 0;
				border: 10rpx solid transparent;
				border-top: 10rpx solid #FFDA2D;
				position: absolute;
				bottom: -20rpx;
				left: 20rpx;
			}
		}

		.pages_intelligenceHeardLeft {
			// border-left: 8rpx solid #FFDA2D;
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: bold;
			line-height: 40rpx;
			color: #333333;
			position: relative;
			padding-left: 16rpx;
			margin-bottom: 24rpx;

			&::after {
				content: "";
				width: 8rpx;
				height: 28rpx;
			 position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #FFDA2D;

			}
		}

		.study_introduce {
			box-sizing: border-box;
			padding: 32rpx;
			border-radius: 24rpx 24rpx 0 0;
			margin-top: 16rpx;
			background-color: #fff;
		}



	}
</style>
